<template>
  <div class="header">
    <div class="w">
      <ul class="service">
        <li><router-link to="/">农作物病害识别系统</router-link></li>
        <li class="line">|</li>
        <li><a href="">病害查询</a></li>
        <li class="line">|</li>
        <li><a href="">专家查询</a></li>
        <li class="line">|</li>
        <li><a href="">病害识别</a></li>
        <li class="line">|</li>
        <li v-show="loginUser.role === '农户' || !loginUser.isLogin"><a href="">问题咨询</a></li>
        <li class="line" v-show="loginUser.role === '农户' || !loginUser.isLogin">|</li>
<!--        <li><a href="">购买商品</a></li>-->
      </ul>

      <ul class="user-info">
        <li v-show="!loginUser.isLogin"><router-link class="link" to="/login" >登录</router-link></li>
        <li v-show="!loginUser.isLogin" class="line">|</li>
        <li v-show="!loginUser.isLogin"><router-link class="link" to="/login">注册</router-link></li>
        <li v-show="loginUser.isLogin">
          <el-dropdown :hide-on-click="false">
            <span class="el-dropdown-link name-span">
              <el-avatar class="user-Avatar " :size="30" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
              {{loginUser.username}}
            </span>
            <el-dropdown-menu slot="dropdown">
              <router-link class="link clearfix" to="/center">
                <el-dropdown-item>个人中心</el-dropdown-item>
              </router-link>
              <router-link class="link clearfix" to="/login">
                <el-dropdown-item>注销</el-dropdown-item>
              </router-link>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li class="line">|</li>
        <li><router-link class="link" to="personalCenter">消息通知</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: "Header",
  computed:{
    ...mapState('user',['loginUser'])
  },
  mounted() {

  }
}
</script>

<style scoped>
.header{
  display: flex;
  background-color: #333;
  height: 50px;
  min-width: 1226px;
}

.service{
  line-height: 50px;
  float: left;
}

.service li{
  float: left;
}

.service li a{
  display: block;
  color: #b0b0b0;
}

.service li a:hover{
  color: #e9e9e9;
}

.service .line{
  margin: 0 10px;
  color: #b0b0b0;
}

.user-info{
  line-height: 50px;
  float: right;
}

.user-info li{
  float: left;
  color: #b0b0b0;
}

.user-info .line{
  margin: 0 10px;
  color: #b0b0b0;
}

.link{
  color: #b0b0b0;
  display: flex;
}

.link:hover{
  color: #e9e9e9;
}

.user-Avatar{
  margin: 10px 5px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.name-span{
  display: flex;
  color: #b0b0b0;
}

.name-span:hover{
  color: #e9e9e9;
}

</style>